<template>
  <view class="content">
    <view class="top-section">
      <image class="logo" src="@/static/logo.png"></image>
      <view class="text-area">
        <text class="title">巡逻打卡</text>
      </view>
    </view>

    <!-- 扫码按钮和文字显示容器 -->
    <view class="scan-container">
      <!-- 扫码按钮 -->
      <view class="scan-button" @tap="beforeScan">
        <image class="scan-icon" src="@/static/scan-icon.png"></image>
      </view>
      <!-- 显示地址 -->
      <text class="address-text">{{ address }}</text>
    </view>
	
	<view class="foot-section">
	  <view class="text-area">
	    <text class="title2">信通科 制</text>
	  </view>
	</view>
  </view>
</template>

<script>
import { getOpenId, getUserByOpenId,ifRegister,WjRegister,saveKaRecord,getXcxConfig,getPicMsgById} from "@/api/common"

export default {
  data() {
    return {
      userLocation: null,  // 用来保存手机当前位置
      qrCodeLocation: null, // 扫码获取到的二维码经纬度
      // range: 1000,  // 打卡范围（单位：米）
      address: '', // 当前地址
    };
  }, 
  onLoad(query) {
  	  console.log("------onLoad-----");
	  let picId = '';
      if(query && query.scene) {
        let scene = decodeURIComponent(query.scene);
        console.log("----scene=",scene);
		if(scene !='')
		{
			picId = scene.split("=")[1];
		}
      }
	  let openId = this.$store.getters.openId;
	  console.log("------onLoad-----openId=",openId);
	  if (openId == "")
	  {
		  console.log("未授权，请求授权！");
		  this.checkAndRequestAuthorization(picId); 
	  }
	  else
	  {
		  //判断用户是否注册
		  this.checkUserByOpenId(openId,picId);
		  
		  //获取允许误差范围
		  let range = this.$store.getters.range;
		  console.log("----允许误差范围："+range);
		  if(range == "")
		  {
		  	  console.log("-----获取允许误差范围！");
		  	  this.getRange(openId);
		  }
		  
		  this.getLocation();
		  // 场景码不为空，则调用接口获取经纬度信息并打卡
		  if(picId !='')
		  {
			  setTimeout(() => {
			    this.getPicMsg(picId);
			  }, 800); // 延迟退出以便用户看到提示
		  }
	  }
	  
  },


  /*
  mounted() {
      this.timeGetLocation();
  },
  beforeDestroy() {
      clearInterval(this.timer);
  },
  */
 onShareAppMessage() {
     return {
       title: '千域签巡',
       path: '/pages/index', // 分享路径
       imageUrl: '/static/clock.jpg' // 分享图片（可选）
     };
   },
 
  methods: {
	timeGetLocation() {
	    this.timer = setInterval(() => {
	        this.getLocation();
	    }, 30000);//30s读一次当前位置
	},
	  
	// 页面加载时检查授权状态，并自动提示用户授权
	checkAndRequestAuthorization(picId) {
	  if (this.isAuthorizing) return; // 如果正在请求授权，则不重复请求
	  this.isAuthorizing = true; // 设置为正在请求授权
	  wx.showModal({
	    title: '授权请求',
	    content: '为了完善您的资料，请授权获取您的微信信息。',
	    showCancel: true,
	    confirmText: '授权',
	    success: (res) => {
	      if (res.confirm) {
	        // 用户点击授权，调用获取用户信息的方法
				  this.$modal.loading("授权中，请耐心等待...")
	        this.getUserProfile(picId);
	      } else {
	        // 用户拒绝授权
	        console.log('用户拒绝授权');
				  this.$modal.msgError("用户拒绝授权");
				  this.showExitPrompt();
	      }
	    },
	    fail: (error) => {
	      console.log('弹窗展示失败', error);
				this.$modal.msgError("弹窗展示失败");
	    },
	    complete: () => {
	      this.isAuthorizing = false; // 重置授权标志位
	    }
	  });
	},
	// 获取用户信息的方法
	getUserProfile(picId) {
	  uni.getUserProfile({
	    desc: '获取您的昵称和头像',
	    success: res => {
	      console.log("用户昵称：", res.userInfo.nickName);
	      console.log("用户头像：", res.userInfo.avatarUrl);
	
	      // 获取微信登录凭证 code
	      wx.login({
	        success: (loginRes) => {
	          if (loginRes.code) {
				let code=loginRes.code;
	            console.log("登录凭证 code：", code);
	            // 后台可以使用 code 获取 openid 和 session_key
	            this.fetchOpenId(code,picId);
	          } else {
	            console.log("登录失败：" + loginRes.errMsg);
					  this.$modal.msgError("微信登录凭证获取失败");
					  
	          }
	        }
	      });
	    },
	    fail: err => {
	      console.error("授权失败：", err);
				// this.$modal.msgSuccess("微信授权失败，请联系管理员!");
	    }
	  });
	},
	
	// 获取 openId 的方法
	fetchOpenId(code,picId) {
		getOpenId({"code":code}).then(res => {
			  this.$modal.closeLoading()
		      console.log("获取openId:",res.data);
			  this.$modal.msgSuccess("微信授权成功!");
			  
			  //获取允许误差范围
			  let range = this.$store.getters.range;
			  console.log("----允许误差范围："+range);
			  if(range == "")
			  {
			  	  console.log("-----获取允许误差范围！");
			  	  this.getRange(res.data);
			  }
			  
		      //全局存放获取的openId
		      this.openId=res.data;//当前页面存放
			  this.$store.dispatch('setOpenId', this.openId)//存放全局
			  this.checkUserByOpenId(this.openId,picId);
		})
	 
	},
	
	//检查用户是否已注册,已注册获取用户注册信息直接登录
	checkUserByOpenId(openId,picId){
			  ifRegister({"openId":openId}).then(res => { 
				let data=res.data;
				if(data=="0"){
					console.log("用户未注册,跳转到注册页面!");
					this.$tab.reLaunch('/subpackages/auth/register');
				}
				else if(data=="1" || data=="2"){
					console.log(data);
					this.$tab.reLaunch('/subpackages/notice/notice')
				}
				else if(data=="3")
				{
					console.log("用户已注册，获取当前位置!",res);
					// 获取当前位置
					this.getLocation();
					
					//获取用户信息
					this.$store.dispatch('GetInfo', openId).then(() => {
					  console.log("----获取用户信息成功-----");
					});
					
					
					// 场景码不为空，则调用接口获取经纬度信息并打卡
					if(picId !='')
					{
						setTimeout(() => {
						  this.getPicMsg(picId);
						}, 800); // 延迟退出以便用户看到提示
					}	
				}
		})
			  
	},
	//退出微信小程序
	exitWX(){
			  wx.showToast({
			                  title: '授权失败，正在退出...',
			                  icon: 'none',
			                  duration: 2000,
			                  complete: () => {
			                    setTimeout(() => {
			                      wx.exitMiniProgram();
			                    }, 2000); // 延迟退出以便用户看到提示
			                  }
			                });
	},
	// 提示用户确认退出的方法
	    showExitPrompt() {
	        wx.showModal({
	            title: '确认退出',
	            content: '您未授权，将退出小程序。是否确认？',
	            showCancel: true,
	            confirmText: '退出',
	            cancelText: '重新授权',
	            success: (res) => {
	                if (res.confirm) {
								  wx.exitMiniProgram(); // 确认退出   
	                } else {
	                    // 用户选择重新授权，重新调用授权方法
	                    this.checkAndRequestAuthorization();
	                }
	            }
	        });
	    },
	
    // 获取手机当前位置
    getLocation() {
		console.log("-----获取手机位置-------");
      return new Promise((resolve, reject) => {
        // 判断是否授权
        uni.authorize({
          scope: 'scope.userLocation',
          success: () => {
            // 授权成功后获取位置信息
            uni.getLocation({
              type: 'bd09', // 百度地图坐标系
              success: (res) => {
                const latitude = res.latitude;
                const longitude = res.longitude;
                this.userLocation = { latitude: res.latitude, longitude: res.longitude };
                
                // 百度地图API请求逆地理编码接口  ak:Llvl4H3MiRS56bGeEENxZWaA3R3JDo9f
                uni.request({
                  url: `https://api.map.baidu.com/reverse_geocoding/v3/?ak=Llvl4H3MiRS56bGeEENxZWaA3R3JDo9f&output=json&coordtype=wgs84ll&location=${latitude},${longitude}`,
                  success: (response) => {
                    if (response.data.status === 0) {
                      const address = response.data.result.formatted_address;
                      console.log("当前位置：", address);
                      this.address = address;
                      resolve(response);
                    } else {
                      console.log("获取地址失败", response.data);
                      this.$modal.msgError(response.data);
                    }
                  },
                  fail: (err) => {
                    console.log("请求失败", err);
                    this.$modal.msgError(err);
                  }
                });
              },
              fail: (err) => {
                console.log("获取位置信息失败", err);
                this.$modal.msgError(err);
              }
            });
          },
          fail: () => {
            // 如果没有授权，提示用户去授权
            uni.showModal({
              title: '权限请求',
              content: '需要获取您的位置信息，请授权',
              success: (res) => {
                if (res.confirm) {
                  uni.openSetting({
                    success: (settingRes) => {
                      if (settingRes.authSetting['scope.userLocation']) {
                        // 授权成功后重新获取位置
                        this.getLocation().then(resolve).catch(reject);
                      }
                    }
                  });
                }
              }
            });
          }
        });
      });
    },
	//获取允许误差范围（单位米）
	getRange(openId){
		getXcxConfig({"configKey":"XCX_RANGE","openId":openId}).then(res => { 
				let data=res.data;
				console.log("允许误差范围：",data,"米");
				if(data=="-1"){
					console.log("未查询到配置信息，默认为100米!");
					this.$store.dispatch('setRange', "100")//存放全局
				}
				else{
					this.$store.dispatch('setRange', data)//存放全局
				}
		})
			  
	},
	
	//获取经纬度信息,并打卡
	getPicMsg(picId){
		getPicMsgById({"picId":picId}).then(res => { 
				let data=res.data;
				console.log("二维码经纬度信息：",data);
				this.daKa(data);
		});
	},
	//打卡
	daKa(locatMsg){
		console.log("------------打卡中------------");
		// 假设二维码中包含经纬度信息，解析出二维码位置（这里使用 JSON 示例）
		this.qrCodeLocation = JSON.parse(locatMsg);  // 假设二维码包含 { latitude, longitude }
		console.log(this.qrCodeLocation);
		// 比较当前位置和二维码位置
		const distance = this.isInRange(this.userLocation, this.qrCodeLocation);
		let openId = this.$store.getters.openId;
		let range = this.$store.getters.range;
		console.log("------------打卡距离：",distance);
		if (distance<=range) {
			this.$modal.loading("打卡中...");
			saveKaRecord({"openId":openId,"pictureId":this.qrCodeLocation.pictureId,"errorRange":distance,"locateAddress":this.address}).then(res => {
				this.$modal.closeLoading();
				console.log("打卡成功",res.data);
				this.$modal.msgSuccess("打卡成功!");
			})
		} else {
		    this.$modal.msgError('超出打卡范围，打卡失败！');
			console.log("------------超出打卡范围，打卡失败！------------");
		} 
	},
	
	beforeScan(){
		this.getLocation();
		setTimeout(() => {
		  this.startScan();
		}, 800); // 延迟退出以便用户看到提示
	},
    // 扫码逻辑
    startScan() {
		console.log("获取当前经纬度：", this.userLocation)
      uni.scanCode({
        success:  (res) => {
          console.log("扫码结果：");
		  console.log(res.path);
		  if(res.path.indexOf("%3D")>-1)
		  {
			  let picId = res.path.split("%3D")[1];
			  //获取经纬度信息,并打卡
			  this.getPicMsg(picId);
		  }
		  else if(res.path.indexOf("picId=")>-1)
		  {
			  let picId = res.path.split("picId=")[1];
			  //获取经纬度信息,并打卡
			  this.getPicMsg(picId);
		  }
        },
        fail: (err) => {
          console.error("扫码失败：", err);
        }
      });
    },

    // 判断是否在打卡范围内
    isInRange(userLocation, qrCodeLocation) {
      if (!userLocation || !qrCodeLocation) return 10000;
    
      const distance = Math.round(this.calculateDistance(userLocation, qrCodeLocation)); // 四舍五入
      console.log(`距离: ${distance} 米`);
      return distance;
    },

    // 使用 Haversine 公式计算两点间的距离（单位：米）
    calculateDistance(pointA, pointB) {
      const rad = Math.PI / 180;
      const lat1 = pointA.latitude * rad;
      const lon1 = pointA.longitude * rad;
      const lat2 = pointB.latitude * rad;
      const lon2 = pointB.longitude * rad;
      
      const dlat = lat2 - lat1;
      const dlon = lon2 - lon1;
      const a = Math.sin(dlat / 2) ** 2 +
                Math.cos(lat1) * Math.cos(lat2) * Math.sin(dlon / 2) ** 2;
      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      
      const R = 6371000; // 地球半径，单位为米
      return R * c; // 返回两点之间的距离（单位：米）
    }
  }
}
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f2f3f5;
}

.top-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60rpx;
}
.foot-section {
  display: flex;
  flex-direction: column;
  margin-top: 500px;
  margin-left: 250px;
}

.logo {
  height: 180rpx;
  width: 180rpx;
  margin-bottom: 20rpx;
}

.text-area {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.title2 {
  font-size: 32rpx;
  color: #8f8f94;
}

/* 扫码按钮和地址文本容器 */
.scan-container {
  display: flex;
  flex-direction: column;  /* 垂直排列 */
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 20%; /* 调整按钮距离屏幕底部的距离 */
  width: 100%;
}

/* 扫码按钮的样式 */
.scan-button {
  width: 280rpx;
  height: 280rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #409EFF, #5a9eff); /* 渐变色效果 */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 10rpx 20rpx rgba(0, 0, 0, 0.15), /* 外阴影 */
              inset 0px 4rpx 6rpx rgba(255, 255, 255, 0.5); /* 内阴影 */
  border: 4rpx solid #fff; /* 白色边框 */
}

.scan-icon {
  width: 100rpx;
  height: 100rpx;
  opacity: 0.9; /* 调整图标透明度 */
}

/* 地址文字样式 */
.address-text {
  margin-top: 10rpx;  /* 地址文本与按钮之间的间隔 */
  font-size: 28rpx;
  color: #00c000;
  text-align: center;
}
</style>
